<template>
    <ul class='song-list'>
        <li class='song' v-for='(song, index) in songs' @click='selectItem({ song, index })'>
            <div class="rank-icon" v-if='rank'>
            <span :class='{"icon icon0": index === 0, "icon icon1": index === 1, "icon icon2": index === 2,"text": index>2}' v-text='index+1'></span>
            </div>
            <div class="content">
                <h2 class="name">{{song.name}}</h2>
                <div class="desc">{{song.singer}}·{{song.album}}</div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default {
        name: 'song-list',
        props: {
            songs: {
                type: Array,
                default: [],
            },
            rank: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            selectItem(currentSong) {
                this.$emit('selectItem', currentSong);
            },
        },
    };
</script>
<style lang="stylus" scoped>
    @import '~styl/var'
    @import '~styl/mixin'
    .song-list
        padding 20px 30px
        .song
            display flex
            align-items center
            height 64px
            font-size $font-size-medium
            box-sizing border-box
            .rank-icon
                flex 0 0 25px
                margin-right 30px
                text-align center
                font-size 0
                .text
                    color $color-theme
                    font-size $font-size-large
                .icon
                    display inline-block
                    &.icon0
                        icon('first', 25px, 24px)
                    &.icon1
                        icon('second', 25px, 24px)
                    &.icon2
                        icon('third', 25px, 24px)
            .content
                flex 1
                overflow hidden
                display flex
                flex-direction column
                .name
                    flex 1
                    line-height 30px
                    no-wrap()
                    color $color-text
                .desc
                    flex 1
                    no-wrap()
                    margin-top 4px
                    color $color-text-d
</style>
